<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <title>后台管理</title>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="/admin/user_index.html">用户管理</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/admin/pet_index.html">宠物管理</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/admin/adopt_index.html">领养管理</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/logout">退出</a>
            </li>
        </ul>
    </div>
</nav>

<div class="container mt-4">
    <div class="row">
        <div class="col-md-6">
            <div class="input-group mb-3">
                <input type="text" class="form-control" placeholder="搜索用户" aria-label="搜索用户"
                       aria-describedby="basic-addon2" id="serachName">
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button" onclick="loadPage(1)">搜索</button>
                </div>
                <div class="input-group-append">
                    <button class="btn btn-primary" type="button" onclick="addUser()">增加用户</button>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <table class="table">
                <thead>
                <tr>
                    <th scope="col">用户名称</th>
                    <th scope="col">用户密码</th>
                    <th scope="col">联系方式</th>
                    <th scope="col">用户性别</th>
                    <th scope="col">联系地址</th>
                    <th scope="col">操作</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>

            <nav aria-label="Page navigation">
                <ul class="pagination justify-content-center mt-3">
                    <li class="page-item disabled">
                        <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
                    </li>
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#">Next</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>

<script src="/js/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        loadPage(1);
    });

    function loadPage(pageNumber) {
        var name = document.getElementById("serachName").value;
        $.ajax({
            url: '/admin/user/list',
            type: 'GET',
            data: {page: pageNumber, name: name},
            dataType: 'json',
            success: function (response) {
                var tbody = $('table tbody');
                tbody.empty();
                $.each(response.items, function (index, item) {
                    var row = '<tr>';
                    row += '<td>' + item.username + '</td>';
                    row += '<td>' + item.password + '</td>';
                    row += '<td>' + item.tel + '</td>';
                    row += '<td>' + item.gender + '</td>';
                    row += '<td>' + item.address + '</td>';
                    row += '<td> <button class="btn btn-primary" onclick="updateUser(' + item.id + ')">修改</button> <button class="btn btn-danger" onclick="deleteUser(' + item.id + ')">删除</button></td>';
                    row += '</tr>';
                    tbody.append(row);
                });
                var pagination = $('.pagination');
                pagination.empty();

                var prevClass = response.hasPreviousPage ? '' : 'disabled';
                var prevLink = '<li class="page-item ' + prevClass + '"><a class="page-link" href="#" onclick="loadPage(' + (pageNumber - 1) + ');">前一页</a></li>';
                pagination.append(prevLink);

                for (var i = 1; i <= response.totalPages; i++) {
                    var activeClass = i === pageNumber ? 'active' : '';
                    var pageLink = '<li class="page-item ' + activeClass + '"><a class="page-link" href="#" onclick="loadPage(' + i + ');">' + i + '</a></li>';
                    pagination.append(pageLink);
                }

                var nextClass = response.hasNextPage ? '' : 'disabled';
                var nextLink = '<li class="page-item ' + nextClass + '"><a class="page-link" href="#" onclick="loadPage(' + (pageNumber + 1) + ');">下一页</a></li>';
                pagination.append(nextLink);
            },
            error: function (error) {
                console.error('Error fetching data:', error);
            }
        });
    }

    function deleteUser(id) {
        const confirm = window.confirm(`确认删除吗？`)
        if (confirm) {
            $.ajax({
                url: '/admin/user/delete',
                data: {id: id},
                type: 'GET',
                success: function (response) {
                    alert("删除成功！")
                    location.reload()
                },
                error: function (error) {
                    console.error('出错:', error);
                }
            });
        }
    }

    function addUser() {
        window.location.href = "/admin/user_add.html"
    }

    function updateUser(id) {
        window.location.href = "/admin/user_update.html?id=" + id
    }


</script>

</body>
</html>
